<template>
  <a-drawer :open="visible" title="盘点单详情" @close="onClose">
    <template #closeIcon>
      <close @on-close="onClose" />
    </template>
    <a-card size="small" title="基本信息">
      <a-descriptions size="small" :column="3">
        <a-descriptions-item label="盘点编号">{{ options.no }}</a-descriptions-item>
        <a-descriptions-item label="盘点状态">
          <span>{{ getDescByValue('CHECK_STATUS_ENUM', options.check_status) }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="盘盈数量">
          <span :style="{ color: options.py_color }">{{ options.py_num }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="盘盈金额">
          <span :style="{ color: options.py_color }">{{ options.py_money }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="盘亏数量">
          <span :style="{ color: options.pk_color }">{{ options.pk_num }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="盘亏金额">
          <span :style="{ color: options.pk_color }">{{ options.pk_money }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="盘点人">{{ options.check_user?.username ?? '暂无' }}</a-descriptions-item>
        <a-descriptions-item label="盘点时间">{{ options.check_time }}</a-descriptions-item>
        <a-descriptions-item label="创建人">{{ options.create_user?.username ?? '' }}</a-descriptions-item>
        <a-descriptions-item label="单据日期">{{ options.create_time }}</a-descriptions-item>
        <a-descriptions-item label="打印次数">{{ options?.printLog?.print_count }}</a-descriptions-item>
        <a-descriptions-item label="最近打印时间">{{ options?.printLog?.update_time }}</a-descriptions-item>
        <a-descriptions-item label="最近打印人">{{ options?.printLog?.printerName }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card class="smart-margin-top10" size="small" :tab-list="tabList" :active-tab-key="activeKey" @tabChange="(key) => (activeKey = key)">
      <template #customTab="{ tab }">
        <span class="ant-card-head-title" :style="compactModeClass">
          {{ tab }}
        </span>
      </template>
      <template v-if="activeKey === 'inventory'">
        <RelevanceGoodsTable :data="options" @reload="getDetail" />
      </template>
    </a-card>
    <template #footer>
      <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
      <!-- <a-button :loading="checkLoading" type="primary" @click="onCheck" v-if="options.check_status === 1 || options.check_status === 4">通过</a-button> -->
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue'
import { errorSentry } from '@/lib/error-sentry'
import RelevanceGoodsTable from './relevance-goods-table.vue'
import { checkStockApi } from '@/api/business/storage/stocktaking-api'
import { useEnums } from '@/hooks/plugins/useEnums'
const compactModeClass = inject('compactModeClass')
const { getDescByValue } = useEnums()

const emit = defineEmits(['refresh', 'reload-list'])

// --------------------- Drawer 显示与隐藏 ---------------------
// 是否展示
const visible = ref(false)
// 详情
const options = ref(undefined)
// 详情tab
const activeKey = ref('inventory')
const tabList = [
  {
    key: 'inventory',
    tab: '商品明细'
  }
]

// 获取详情
async function getDetail(params) {
  const res = await checkStockApi.detail(params)
  options.value = res.data
}

async function showDrawer(item) {
  await getDetail({ id: item.id })
  visible.value = true
}

const onClose = () => {
  visible.value = false
}
// --------------------- 通过 ---------------------
const checkLoading = ref(false)
const onCheck = async () => {
  checkLoading.value = true
  try {
    const res = await checkStockApi.check({ id: options.value.id })
    message.success(res.msg)
    visible.value = false
    emit('reload-list')
  } catch (e) {
    message.error(e.msg)
    errorSentry.captureError(e)
  } finally {
    checkLoading.value = false
  }
}
defineExpose({
  showDrawer
})
</script>
